<html>
<head>
  <title><%= title %></title>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> 

  <!-- TODO: most of the css before the '*' can be removed. -->

  <style>
    #container{ margin: 0 auto; width: 800px; }

    /* Debug borders */
    /* p, li, dt, dd, div, pre, h1, h2, h3, h4, h5, h6 { border: 1px solid red; } */

    body { font-size: 14px; line-height: 20px; margin: 1em 5% 1em 5%; font-family: Verdana, Arial, Helvetica, sans-serif; }
    a { color: #336; text-decoration: underline; }
    a:visited { color: #334; }
    em { font-style: italic; }
    strong { font-weight: bold; }
    tt { color: navy; }

    h1, h2, h3, h4, h5, h6 { color: #223; margin-top: 1.2em; margin-bottom: 0.5em; line-height: 1.3; }
    h1 { border-bottom: 2px solid silver; }
    h2 { border-bottom: 2px solid silver; padding-top: 0.5em; }

    hr { color: #ccc; margin-top: 1.6em; }

    p { color: #222; text-align: justify; margin-top: 0.5em; margin-bottom: 0.5em; line-height: 1.4em; }

    /* pre { padding: 10; margin: 0; font-family: monospace; font-size: 0.9em; } */

    pre.pass { color: green; }
    pre.fail { color: red; }
    pre.error { color: red; font-weight: bold; }

    span#author { color: #527bbd; font-weight: bold; font-size: 1.1em; }
    span#email { }
    span#revision { }

    div#footer { font-size: small; border-top: 2px solid silver; padding-top: 0.5em; margin-top: 4.0em; }
    div#footer-text { float: left; padding-bottom: 0.5em; }
    div#footer-badges { float: right; padding-bottom: 0.5em; }

    /* Block element content. */
    div.content { padding: 0; }

    /* Block element titles. */
    h1.title { font-weight: bold; text-align: left; font-size: 3em; margin-top: 1.0em; margin-bottom: 0.5em; }

    /* Block element titles. */
    div.title, caption.title { font-weight: bold; text-align: left; margin-top: 1.0em; margin-bottom: 0.5em; }
    div.title + * { margin-top: 0; }
    td div.title:first-child { margin-top: 0.0em; }
    div.content div.title:first-child { margin-top: 0.0em; }
    div.content + div.title { margin-top: 0.0em; }
    div.sidebarblock > div.content { background: #ffffee; border: 1px solid silver; padding: 0.5em; }

    img { border-style: none; }

    dl { margin-top: 0.8em; margin-bottom: 0.8em; }
    dt { margin-top: 0.5em; margin-bottom: 0; font-style: italic; }
    dd > *:first-child { margin-top: 0; }
    ul, ol { list-style-position: outside; }

    thead { font-weight: bold; }
    tfoot { font-weight: bold; }

    *{margin:0;padding:0;}
    html,body{height:100%;color:black;}
    body{background-color:white;font:13.34px helvetica,arial,freesans,clean,sans-serif;*font-size:small;}
    table{font-size:inherit;font:100%;}
    select,input[type=text],input[type=password],input[type=image],textarea{font:99% helvetica,arial,freesans,sans-serif;}
    select,option{padding:0 .25em;}
    optgroup{margin-top:.5em;}
    input.text{padding:1px 0;}
    pre,code{font:12px Monaco,"Courier New","DejaVu Sans Mono","Bitstream Vera Sans Mono",monospace;}
    body *{line-height:1.4em;}
    p{margin:1em 0;}
    img{border:0;}
    abbr{border-bottom:none;}

    .wikistyle h1,.wikistyle h2,.wikistyle h3,.wikistyle h4,.wikistyle h5,.wikistyle h6{border:0!important;}
    .wikistyle h1{font-size:170%!important;border-top:4px solid #aaa!important;padding-top:.5em!important;margin-top:1.5em!important;}
    .wikistyle h1:first-child{margin-top:0!important;padding-top:.25em!important;border-top:none!important;}
    .wikistyle h2{font-size:150%!important;margin-top:1.5em!important;border-top:4px solid #e0e0e0!important;padding-top:.5em!important;}
    .wikistyle h3{margin-top:1em!important;}
    .wikistyle p{margin:1em 0!important;line-height:1.5em!important;}
    .wikistyle ul{margin:1em 0 1em 2em!important;}
    .wikistyle ol{margin:1em 0 1em 2em!important;}
    .wikistyle ul ul,.wikistyle ul ol,.wikistyle ol ol,.wikistyle ol ul{margin-top:0!important;margin-bottom:0!important;}
    .wikistyle blockquote{margin:1em 0!important;border-left:5px solid #ddd!important;padding-left:.6em!important;color:#555!important;}
    .wikistyle dt{font-weight:bold!important;margin-left:1em!important;}
    .wikistyle dd{margin-left:2em!important;margin-bottom:1em!important;}
    .wikistyle table{margin:1em 0!important;}
    .wikistyle table th{border-bottom:1px solid #bbb!important;padding:.2em 1em!important;}
    .wikistyle table td{border-bottom:1px solid #ddd!important;padding:.2em 1em!important;}
    .wikistyle pre{margin:1em 0!important;font-size:90%!important;background-color:#f8f8ff!important;border:1px solid #dedede!important;padding:.5em!important;line-height:1.5em!important;color:#444!important;overflow:auto!important;}
    .wikistyle pre code{padding:0!important;font-size:100%!important;background-color:#f8f8ff!important;border:none!important;}
    .wikistyle code{font-size:90%!important;background-color:#f8f8ff!important;color:#444!important;padding:0 .2em!important;border:1px solid #dedede!important;}
    .wikistyle pre.console{margin:1em 0!important;font-size:90%!important;background-color:black!important;padding:.5em!important;line-height:1.5em!important;color:white!important;}
    .wikistyle pre.console code{padding:0!important;font-size:100%!important;background-color:black!important;border:none!important;color:white!important;}
    .wikistyle pre.console span{color:#888!important;}
    .wikistyle pre.console span.command{color:yellow!important;}
  </style>

  <% if css %>
  <link rel="stylesheet" href="<%= css %>" type="text/css">
  <% end %>

  <!-- JQuery is needed -->
  <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript" language="javascript"></script>

  <!-- Highlight.js -->
  <script src="http://yandex.st/highlightjs/6.1/highlight.min.js"></script>
  <link rel="stylesheet" href="http://yandex.st/highlightjs/6.1/styles/github.min.css">

  <script>
    $(document).ready(function() {
      $('pre').each(function(i, e) {hljs.highlightBlock(e)});
    });
  </script>

</head>

<body class="wikistyle">

  <!-- Side Table of Contents -->
  <div id="sidebar" style="position: fixed; top: 10; right: 10; background: white;">
    <a href="javascript: toc_toggle();">
      <!-- TODO: find a preminatn image on web to use -->
      <!-- <img src="http://www.cdnjs.com/images/poweredbycloudflare.png" style="border: none;" alt="TOC" align="right"/> -->
    </a>

    <div id="toc_side" class="toc">
    </div>
  </div>

  <div id="container">
    <div id="header">
      <!-- TODO: find a preminatn image on web to use -->
      <!-- <img src="http://www.cdnjs.com/images/poweredbycloudflare.png" align="left" style="padding-right: 10px;" alt=""/> -->

      <div style="font-size: 2em"><%= title %></div>

      <h1>Table of Contents</h1>

      <div class="toc">
      </div>
    </div>

    <div id="content">
      <%= spec %>
    </div>
  </div>

  <br/><br/><br/>
</body>

</html>

<script src="../assets/scripts/spec.js" type="text/javascript" language="javascript"></script>

<script type="text/javascript" language="javascript">
  /*****************************************************************
   * $.toc()
   * by rebecca murphey
   * rmurphey gmail com
   *
   * This function is called on its own and takes as an argument
   * a list of selectors with which it will build a table of
   * contents. 
   *
   * The first selector will make up the top level of the TOC;
   * the second selector will make up the second level of the TOC;
   * etc.
   *
   * This function returns a div containing nested unordered lists;
   * each list item is linked to an anchor tag added before the item
   * on the page.
   *
   * usage: $.toc('h1,h2,h3').prependTo('body');
   ************************************************************************/
  (function($) { 
    $.toc = function(tocList) {
      $(tocList).addClass('jquery-toc');
      var tocListArray = tocList.split(',');
      $.each(tocListArray, function(i,v) { tocListArray[i] = $.trim(v); });
      var $elements = $('.jquery-toc');
      $('body').append('<div></div>');
      var $toc = $('body div:last');
      var lastLevel = 1;
      $toc.append('<ul class="jquery-toc-1"></ul>');
      $elements.each(function() {
        var $e = $(this);
        var text = $e.text();
        var anchor = text.replace(/ /g,'-');
        $e.before('<a name="' + anchor + '"></a>');
        var level;
        $.each(tocListArray, function(i,v) { 
          if (v.match(' ')) {
            var vArray = v.split(' '); 
            var e = vArray[vArray.length - 1];
          } else { e = v; }
          if ($e.is(e)) { level = i+1; } 
        });
        var className = 'jquery-toc-' + level;
        var li = '<li><a href="#' + anchor + '">' + text + '</a></li>';
        if (level == lastLevel) {
          $('ul.' + className + ':last',$toc).append(li);
        } else if (level > lastLevel) {
          var parentLevel = level - 1;
          var parentClassName = 'jquery-toc-' + parentLevel;
          $('ul.' + parentClassName + ':last',$toc).
            append('<ul class="' + className + '"></ul>');
          $('ul.' + className + ':last',$toc).append(li);
        } else if (level < lastLevel) {
          $('ul.' + className + ':last',$toc).append(li);
        }
        lastLevel = level;
      });
      var $toc_ul = $('ul.jquery-toc-1',$toc);
      $toc.remove();
      return($toc_ul);
   }
  })(jQuery);
</script>

<script>
  function toc_toggle() {
    $('#toc_side').toggle();
    $("pre").addClass("pass");
    $("pre:contains('FAIL:')").addClass("fail");
    $("pre:contains('ERROR:')").addClass("error");
  };

  $.toc('#content h1,h2,h3,h4').appendTo('.toc');

  toc_toggle();
</script>

